<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      size="small"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
    >
      <el-row>
        <el-col :span="13">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="角色名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="角色编码" prop="code">
            <el-input v-model="dataForm.code" placeholder="角色编码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="13">
          <el-form-item label="角色类型" prop="type">
            <el-select v-model="dataForm.type" placeholder="请选择">
              <el-option
                v-for="item in roleTypeArray"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="角色标识" prop="sign">
            <el-input v-model="dataForm.sign" placeholder="角色标识"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          v-model="dataForm.remark"
          placeholder="备注"
        ></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="13">
          <el-form-item size="mini" label="菜单权限" prop="menuIds">
            <el-tree
              :data="menuList"
              :props="menuListTreeProps"
              node-key="id"
              ref="menuListTree"
              :default-expand-all="isExpandAll"
              show-checkbox
            >
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item size="mini" label="数据权限" prop="unitIds">
            <el-tree
              :data="unitList"
              :props="unitListTreeProps"
              node-key="id"
              ref="unitListTree"
              :default-expand-all="isExpandAll"
              show-checkbox
            >
            </el-tree>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from "@/utils";

import { pageList } from "@/api/menu";
import { saveAndUpdate, findByMenuIds } from "@/api/role";
import { pageList as pageUnitList } from "@/api/unit";

export default {
  data() {
    return {
      roleTypeArray: [
        { value: 1, text: "固定角色" },
        { value: 2, text: "自定义角色" },
      ],
      visible: false,
      isExpandAll: false,
      menuList: [],
      unitList: [],
      unitListTreeProps: {
        label: "name",
        children: "children",
      },
      menuListTreeProps: {
        label: "name",
        children: "children",
      },
      dataForm: {
        id: 0,
        name: "",
        code: "",
        remark: "",
        sign: "",
        type: "",
        menuIds: [],
        unitIds: [],
      },
      dataRule: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "角色编码不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "角色类型不能为空", trigger: "change" },
        ],
        sign: [
          { required: true, message: "角色标识不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init(data) {
      this.dataForm.id = 0;
      this.isExpandAll = false;
      if (data && data.id) {
        this.isExpandAll = true;
        this.dataForm.id = data.id;
      }

      this.getUnitList();
      pageList({})
        .then((res) => {
          if (res && res.code === 0) {
            this.menuList = treeDataTranslate(res.data, "id");
          }
        })
        .then(() => {
          this.visible = true;
          this.$nextTick(() => {
            this.$refs.dataForm.resetFields();
            this.$refs.menuListTree.setCheckedKeys([]);
            this.$refs.unitListTree.setCheckedKeys([]);
          });
        })
        .then(() => {
          if (this.dataForm.id) {
            this.dataForm.id = data.id;
            this.dataForm.name = data.name;
            this.dataForm.type = data.type;
            this.dataForm.sign = data.sign;
            this.dataForm.code = data.code;
            this.dataForm.remark = data.remark;
            this.dataForm.menuIds = [];
            this.dataForm.unitIds = [];
            findByMenuIds({ id: this.dataForm.id }).then((res) => {
              if (res && res.code === 0) {
                this.dataForm.menuIds = [].concat(res.data.menuIds);
                this.dataForm.unitIds = [].concat(res.data.unitIds);
                this.$nextTick(() => {
                  this.$refs.menuListTree.setCheckedKeys(this.dataForm.menuIds);
                  this.$refs.unitListTree.setCheckedKeys(this.dataForm.unitIds);
                });
              }
            });
          } else {
            this.$refs.menuListTree.setCheckedKeys([]);
            this.$refs.unitListTree.setCheckedKeys([]);
          }
        });
    },
    // 获取单位数据列表
    getUnitList() {
      pageUnitList({}).then((res) => {
        if (res && res.code === 0) {
          this.unitList = treeDataTranslate(res.data, "id");
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveAndUpdate({
            id: this.dataForm.id || "",
            name: this.dataForm.name,
            type: this.dataForm.type,
            code: this.dataForm.code,
            sign: this.dataForm.sign,
            remark: this.dataForm.remark,
            menuIds: [].concat(
              this.$refs.menuListTree.getCheckedKeys(),
              this.$refs.menuListTree.getHalfCheckedKeys()
            ),
             unitIds: [].concat(
              // this.$refs.unitListTree.getCheckedKeys(),
              this.$refs.unitListTree.getHalfCheckedKeys()
            ),
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
